// 搜索框的显示和隐藏
let flag = true
$('.top_content').click(() => {
    flag ? $('.page-box').slideUp() : $('.page-box').slideDown()
    $('.top_content')[0].className = flag ? "layui-icon layui-icon-down top_content" : "layui-icon layui-icon-up top_content"
    flag = !flag
})

// 点击数据刷新
document.querySelector('.shuaxing').addEventListener('click', function () {
    $('.refresh').click()
})


// 把参数放到一个对象
const query = {
    tagname: '',	//是	标签名称
    page: 1,  	//是	页码
    limit: 5,	//是	每页数量
}
// todo================= 标签管理的渲染 ======================
render()
async function render() {
    const { data: { data } } = await axios.get('/ydd_tag/list', { params: query })
    // console.log(data)
    // console.log(data.count)
    const res = data.data
    // console.log(res);
    document.querySelector('#list').innerHTML = res.map(({ id, tagname }, index) => {
        return `
            <tr>
                <td>${index + 1}</td>
                <td name="one">${id}</td>
                <td name="two">${tagname}</td>
                <td>
                  <button type="button"
                    class="layui-btn layui-btn-xs btn_edit layui-icon layui-icon-edit wxy_edit wxy_add_del" data-id="${id}"></button>
                  <button type="button"
                    class="layui-btn layui-btn-danger layui-btn-xs btn_delete layui-icon layui-icon-delete wxy_del wxy_add_del" data-id="${id}"></button>
                </td>
            </tr>
        `
    }).join('')

    //  在这渲染分页，因为在这获取可以到总数
    renderPage(data.count)
}

// todo=================== 增加标签 ==========================
// 显示弹窗
const addFormstr = `
          <form id="addForm" class="layui-form">
          <!-- 用来存Id -->
        <div class="layui-form-item layui-hide">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="id" readonly required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
            <!-- 第一行 分类名称 -->
            <div class="layui-form-item">
              <label class="layui-form-label">标签名称</label>
              <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入标签名称" autocomplete="off"
                  class="layui-input wxy_fenlei">
              </div>
            </div>
            
            <!-- 第二行 按钮 -->
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn form_add" lay-submit lay-filter="formDemo">确认添加</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="form_reset">取消</button>
              </div>
            </div>
          </form>
`
let indexADdForm
document.querySelector('#newly').addEventListener('click', function () {
    indexADdForm = layer.open({
        content: addFormstr,
        type: 1,
        title: ['添加标签', 'font-size:18px;'],
        area: ['690px', '230px']
    })
})

// 点击提交
// 事件委托给body
document.querySelector('body').addEventListener('click', async function (e) {
    e.preventDefault()
    const form = document.querySelector('#addForm')
    // 如果点击添加
    // 收集表单数据
    if (e.target.className === 'layui-btn form_add') {
        const { name } = serialize(form, { hash: true })
        console.log(name);

        // 发送ajax请求
        try {
            const res = await axios.post('/ydd_tag/add', {
                tagname: name
            })
            console.log(res);
            console.log(res.status, res.statusText);
            if (res.status === 200 && res.statusText === 'OK') {
                layer.msg('添加成功', {
                    icon: 1,
                    time: 2000,
                });
                render()
                layer.close(indexADdForm)
            }
        } catch (error) {
            console.log(error)
            layer.msg('添加失败', {
                icon: 2,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            })
        }

    }
    // 如果点击重置，清空表单数据
    else if (e.target.className === 'layui-btn layui-btn-primary') {
        layer.close(indexADdForm)
    }

})


// todo=================== 删除标签 ==========================
// 事件委托给list
document.querySelector('#list').addEventListener('click', function (e) {
    if (e.target.className === 'layui-btn layui-btn-danger layui-btn-xs btn_delete layui-icon layui-icon-delete wxy_del wxy_add_del') {
        console.log(e.target.dataset.id);
        const id = e.target.dataset.id
        layer.confirm('您确定删除该分类吗', async function (index) {
            //do something
            const res = await axios.get('/ydd_tag/del', {
                params: {
                    id
                }
            })
            console.log(res.data);
            if (res.data.errno === 1000 && res.data.errmsg === '系统默认数据，不允许删除') {
                layer.msg(res.data.errmsg);
            } else {
                layer.msg('删除成功');
            }
            // 关闭提示框
            layer.close(index)
        });
    }
})

// todo=================== 修改标签 ==========================
const amendFormstr = `
        <form id="editForm" class="layui-form" lay-filter="editForm">
            <!-- 用来存id -->
            <div class="layui-form-item ">
              <label class="layui-form-label">分类名称</label>
              <div class="layui-input-block">
                <input type="text" name="id" readonly required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                  class="layui-input">
              </div>
            </div>

            <!-- 第一行 分类名称 -->
            <div class="layui-form-item">
              <label class="layui-form-label">标签名称</label>
              <div class="layui-input-block">
                <input type="text" name="tagname" required lay-verify="required" placeholder="请输入标签名称" autocomplete="off"
                  class="layui-input wxy_fenlei">
              </div>
            </div>
            
            <!-- 第二行 按钮 -->
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn form_add alter" lay-submit lay-filter="formDemo">确认修改</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="form_reset">取消</button>
              </div>
            </div>
        </form>
`
let indexEditForm
let form = layui.form
// 事件委托给list
document.querySelector('#list').addEventListener('click', function (e) {
    if (e.target.className === 'layui-btn layui-btn-xs btn_edit layui-icon layui-icon-edit wxy_edit wxy_add_del') {
        // 模态框
        indexEditForm = layer.open({
            content: amendFormstr,
            type: 1,
            title: ['修改标签', 'font-size:18px;'],
            area: ['690px', '230px']
        })

        const id = e.target.dataset.id
        console.log(id)

        // 发送ajax 获取数据
        axios.get(`/ydd_tag/rowInfo`, {
            params: {
                id
            }
        }).then(({ data: { data } }) => {
            console.log(data)
            // const id = data.id
            // console.log(id);
            // // 填充表单
            // form.val('editForm', data)
            // // $('[name=tagname]').val(data.tagname)
            const name = document.querySelectorAll('#editForm [name]')
            console.log(name)
            name.forEach(item => {
                item.value = data[item.name]
            })
            // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            // 点击修改
            document.querySelector('body').addEventListener('click', async function (e) {
                if (e.target.className === 'layui-btn form_add alter') {

                    const from = document.querySelector('#editForm')
                    // console.log(data.id);
                    const fd = new FormData(from)
                    const res = await axios.post('/ydd_tag/update',fd)
                    console.log(res);
                    render()
                    layer.msg('修改成功')
                    layer.close(indexEditForm)
                }
                
                if (e.target.className === 'layui-btn layui-btn-primary') {
                    layer.msg('已取消')
                    layer.close(indexEditForm)
                }
            })
        })
    }
})

// todo======================== 查询 ======================================
document.querySelector('.wxy_input').addEventListener('change', async function () {

    query.tagname = this.value
    render()

    document.querySelector('#reset').addEventListener('click', function () {
        document.querySelector('.wxy_input').value = ''
        $('.refresh').click()
    })
})

// todo======================== 分页器 ======================================
const laypage = layui.laypage;
function renderPage(total) {
    //执行一个laypage实例
    laypage.render({
        elem: 'page-box', //注意，这里的 test1 是 ID，不用加 # 号
        count: total, //数据总数，从服务端得到
        limit: query.limit, //设置每页多少条数据
        curr: query.page,
        limits: [5, 10, 15], //每页条数的选择项。
        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //排版
        jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数

            query.page = obj.curr
            query.limit = obj.limit

            //首次不执行
            if (!first) {
                //do something
                render()
            }
        }
    });
}

// 点击显示隐藏菜单
let flag1 = true
$('#pullDown').on('click', function (e) {
    e.stopPropagation()
    flag1 ? $('#menu').show() : $('#menu').hide()
    flag1 = !flag1
})
$('#menu').on('click', function (e) {
    e.stopPropagation()
    $('#menu').show()
})
// 点击页面让菜单消失
$('body').on('click', function () {
    $('#menu').hide()
    flag1 = true
})

// 点击隐藏列
$('body').on('change', '.cked', function () {
    // console.log(this.checked);
    // console.log($('#test [name="one"]'));
    this.checked ? $(`[name=${this.id}]`).show() : $(`[name=${this.id}]`).hide()
})

